var bankList=[
    '中国银行','北京银行','交通银行','浦发银行','重庆银行','长安银行',
    '中国银行','北京银行','交通银行','浦发银行','重庆银行','长安银行',
    '中国银行','北京银行','交通银行','浦发银行','重庆银行','长安银行',
    '中国银行','北京银行','交通银行','浦发银行','重庆银行','长安银行',
    '中国银行','北京银行','交通银行','浦发银行','重庆银行','长安银行12121',
];

var province=[
    '河北','山西','内蒙','辽宁','吉林' ,
    '黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南',
    '黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南',
    '黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南',
    '黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南',
]

var city =  [
    '城市1','城市2','城市3','城市4','城市5','城市6','城市7',
    '城市1','城市2','城市3','城市4','城市5','城市6','城市7',
    '城市1','城市2','城市3','城市4','城市5','城市6','城市7',
]
var branch = [
    '支行1',
    '支行2',
    '支行3',
    '支行4',
    '支行5',
    '支行6',
    '支行7','支行1',
    '支行2',
    '支行3',
    '支行4',
    '支行5',
    '支行6',
    '支行7','支行1',
    '支行2',
    '支行3',
    '支行4',
    '支行5',
    '支行6',
    '支行7','支行1',
]


//初始化单页view
var viewApi = mui('#app').view({
    defaultPage: '#setting'
});
//初始化单页的区域滚动
mui('#setting .mui-scroll-wrapper').scroll();

var view = viewApi.view;
(function($) {
    //处理view的后退与webview后退
    var oldBack = $.back;
    $.back = function() {
        if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
            viewApi.back();
        } else { //执行webview后退
            oldBack();
        }
    };
    //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
    //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
    view.addEventListener('pageBeforeShow', function(e) {
        var pageId = e.detail.page.id;
        console.log(pageId+ ' beforeShow');
        if(pageId="bankList"){
            // 银行列表
            var html = '';
            bankList.length && bankList.forEach(item=>{
                html+=`<li class="mui-table-view-cell"  >${item}</li>`;
            })
            mui("#bankList ul")[0].innerHTML = html;
        }
        if(pageId="province"){
            // 省份列表
            var html = '';
            province.length && province.forEach(item=>{
                html+=`<li class="mui-table-view-cell"  >
                        <a href="#city" class="mui-navigate-right">${item}</a>
                    </li>`
            })
            mui("#province ul")[0].innerHTML = html;
        }
        if (pageId = "city") {
            // 城市列表
            var html = '';
            city.length && city.forEach(item=>{
                html+=`<li class="mui-table-view-cell"  >${item}</li>`;
            })
            mui("#city ul")[0].innerHTML = html;
        }
        if (pageId == 'branch') {
            //初始化单页的区域滚动
        }
    });
    view.addEventListener('pageShow', function(e) {
        // console.log(e.detail.page.id + ' show');
        //初始化单页的区域滚动
        mui('.mui-scroll-wrapper').scroll();
    });
    view.addEventListener('pageBeforeBack', function(e) {
        //console.log(e.detail.page.id + ' beforeBack');
    });
    view.addEventListener('pageBack', function(e) {
        //console.log(e.detail.page.id + ' back');
    });
})(mui);

// 身份信息
var vm = new Vue({
    el:"#certification",
    data:{
        json:{
            'realname':'', //  姓名
            // 'idCard':'',//  身份证号
            'bankNo':'',//  卡号
            'bankId':'',//  银行
            'bankPro':'',//  省
            'bankCity':'',// 城市
            'bankBranch':'',//  支行
        },
    },
    computed: {
        // 计算属性的 getter: 开户地点
        bankArea: function () {
            return this.json.bankPro + this.json.bankCity
        }
    }
})

// 支行信息
var vmBranch = new Vue({
    el:"#branchScroll",
    data:{
        keyword: '',
        branch: branch,
        tempArr: branch, // 备份
    },
    watch: {
        keyword: function (val) {
            // 监听 keyword
            console.log('val',val)
            if(val){
                this.branch = this.tempArr.filter(item=>{
                    return item.indexOf(val) >-1
                })
            }else{
                this.branch = this.tempArr;
            }

        },
    }
})


mui.ready(function () {
    // 选择银行
    mui("#bankList").on('tap',"li",function () {
        console.log("xxxxxxxxxxx")
        mui.back();
        vm.json.bankId = this.innerHTML

    })
    // 选择省份
    mui("#province").on('tap',"li",function () {
        // mui.back();
        vm.json.bankPro = this.querySelector('a').innerHTML
    })
    // 选择城市
    mui("#city").on('tap',"li",function () {
        //loading带文字
        layer.open({
            type: 2
            ,content: '加载中'
            ,time:"1"
        });
        mui.back();
        vm.json.bankCity = this.innerHTML;
        setTimeout(()=>{
            mui.back();
        },500)

    })
    // 选择支行
    mui("#branch").on('tap',"li",function () {
        mui.back();
        vm.json.bankBranch = this.innerHTML
    })

    // 提交数据
    mui(".mui-button-forms").on("tap","#submit",function () {
        // 'realname':'', //  姓名
        // 'idCard':'',//  身份证号
        // 'bankNo':'',//  卡号
        // 'bankId':'',//  银行
        // 'bankPro':'',//  省
        // 'bankCity':'',// 城市
        // 'bankBranch':'',//  支行
        var json = vm.json;
        if (json.realname.length < 2) {
            mui.alert('请输入姓名'); return;
        }
        // if(!json.idCard){
        //     mui.alert('请输入身份证号'); return;
        // }
        if(!json.bankNo){
            mui.alert('请输入卡号'); return;
        }
        if(!json.bankId){
            mui.alert('请输选择所属银行'); return;
        }
        if(!vm.bankArea){
            mui.alert('请输选择开户地点'); return;
        }
        if(!json.bankBranch){
            mui.alert('请输选择开户支行'); return;
        }

        console.log(JSON.stringify(json))
    })
})
